/**
    展示附件
        常用在列表中，点击可预览

        props
            fileArr[array = []] 返回的附件实体的集合
            iconFileName[string = 'file-large'] 附件显示icon的文件夹，icon文件需要在`/static/img/${iconFileName}/`下
            inline[boolean = true] 是否在一行内联显示
 */

<template>
    <div class="v-show-file">
        <ul v-if="inline"
            class="file-inline">
            <template v-for="(item, index) in fileArr">
                <template v-if="imgType.some(v => v == item.fileType.toLowerCase())">
                    <li :key="index"
                        @click.stop="fnScanFile(item)">
                        <img :src="`${download}?attachmentId=${item.attachmentId}`" />
                    </li>
                </template>
                <template v-else>
                    <li :key="index"
                        @click="fnScanFile(item)">
                        <img :src="fltIcon(item.fileType)" />
                    </li>
                </template>
            </template>
        </ul>

        <ul v-else
            class="file-block">
            <template v-for="(item, index) in fileArr">
                <li :key="index"
                    @click="fnScanFile(item)">
                    <img :src="fltIcon(item.fileType)" />
                    <span>{{item.fileName}}</span>
                </li>
            </template>
        </ul>
    </div>
</template>

<script>
import Config from '@/libs/config.js'

export default {
    props: {
        // 返回的文件实例集合
        fileArr: {
            type: Array,
            default: _ => ({})
        },
        // 附件显示icon的文件夹
        iconFileName: {
            type: String,
            default: 'file-large'
        },
        // 是否一行显示
        inline: {
            type: Boolean,
            default: true
        }
    },
    data () {
        return {
            download: Config.api.download,
            // 图片的类型
            imgType: ['.png', '.jpeg', '.gif', '.jpg']
        }
    },
    methods: {
        // // 打开图片查看器
        // openPhotoBrowser (item) {
        //     let photos = `${this.download}?attachmentId=${item.attachmentId}`
        //     var photoBrowser = this.$f7.photoBrowser.create({
        //         photos: [photos],
        //         type: "popup",
        //     })
        //     photoBrowser.open(0)
        //     photoBrowser.on("closed", () => {
        //         photoBrowser.destroy()
        //     });
        // },
        // // 文件预览
        // fnFlieView (item) {
        //     let url = `${this.download}?attachmentId=${item.attachmentId}`

        //     this.$f7router.navigate(`/business/file/fileView?path=${url}`)
        // },

        // 查看附件
        fnScanFile (item) {
            let params = {
                filename: item.fileName,
                downloadurl: `${this.download}?attachmentId=${item.attachmentId}`
            }

            window.qmSdk.scanFile(params)
        },

        // 不是图片的显示
        fltIcon (type) {
            let icon = ''

            if (type) {
                type = type.toLowerCase()

                if (type.startsWith('.')) {
                    icon = type.substring(1)
                } else {
                    icon = type
                }
            } else {
                icon = 'default'
            }

            return `/static/img/${this.iconFileName}/${icon}.png`
        }
    }
}
</script>

<style lang="less" scoped>
.v-show-file {
    ul.file-inline {
        display: flex;
        flex-wrap: wrap;
        padding: 10px;

        li {
            width: 56px;
            height: 56px;
            border-radius: 6px;
            margin-right: 10px;
            margin-bottom: 10px;
            display: flex;

            img {
                flex: 1;
                max-width: 100%;
                max-height: 100%;
                object-fit: cover;
            }
        }
    }

    ul.file-block {
        padding: 10px;

        li {
            display: flex;
            padding: 6px 0;
            align-items: center;

            img {
                width: 25px;
                height: 28px;
                flex-shrink: 0;
            }

            span {
                padding-left: 10px;
                font-size: 14px;
                font-weight: 400;
                color: #0f1826;
                line-height: 16px;
            }
        }
    }
}
</style>
